<template>
<div>
  <div class="trend">
    <div class="naviga">市场中心</div>
    <div class="trendBar">
        <el-select  v-model="cateValue" placeholder="选择品类" @clear="abc()">
              <el-option
                v-for="item in cateOption"
                :key="item.id"
                :label="item.categoryName"
                :value="item.id"
              >
              </el-option>
        </el-select>
        <el-select  placeholder="选择类型"  v-model="allCateValue">
              <el-option
                v-for="item in allOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
        </el-select>
      <el-input placeholder="请输入细分市场名称" class="input-with-select" v-model="conValue">
        <el-button slot="append" @click="getData">搜索</el-button>
      </el-input>
      <p class='btn'  @click="customMarketVisible=true;parentId=null;marketBases=''">+&nbsp;自定义细分市场</p>

    </div>
  <div class="no-cont" v-if="datas.length==0">
    <div class="page-warp">
      <h2>我的市场</h2>
    </div>
    <p>暂无数据</p>
  </div>
  <div class="big-warp" v-else>
    <!--分页start-->
    <div class="page-warp">
      <h2>我的市场</h2>
      <div class="paging">
      <span class="first-page"
            style="cursor: pointer"
            @click="change(1)"
      >首页</span>
        <el-pagination
          layout="prev, pager, next"
          prev-text='上一页'
          next-text='下一页'
          background
          @current-change="change"
          :current-page="page"
          :total="totalPage">
        </el-pagination>
      </div>
    </div>
    <!--分页end-->
    <div class="trend-con"  v-for="(item,index) in datas" :key="index">
      <div class="trend-con-head">
        <li>品类：<span>{{item.market.category}}</span></li>
        <li>细分市场：<span>{{item.market.marketName}}</span></li>
        <li>
          <span>
                <img @click="customMarketVisible=true;parentId=item.market.id;" src="../../../images/editor.png"/>
          </span>
          <span><img @click="delete1(item.market.id)" src="../../../images/delete.png"/></span>
         <span><img @click="showMarketVisible=true;singleId=item.market.id" src="../../../images/show.png"/></span>
        </li>
      </div>
      <div class=" analysis clearfix" >
        <div class="analysis-wrap">
            <div v-if='item.marketBase!=null'  class="analysis1">
                <img src="../../../images/market-capacity.png" />
                <ul>
                  <li>市场容量</li>
                  <li class='font'>¥{{item.marketBase.marketBase}}</li>
                  <li>
                    <span :style="{'color':item.marketBase.growthRate>0 ? '#ec3b57':'#70d99d'}">{{item.marketBase.growthRate>0?'+'+(item.marketBase.growthRate*100).toFixed(2):(item.marketBase.growthRate*100).toFixed(2)}}%</span>
                    <img src="../../../images/Up-icon.png" v-if="item.marketBase.growthRate>0"/>
                    <img src="../../../images/Down-icon.png" v-else />
                    <span style='color:#666666'>增长率</span>
                  </li>
                </ul>
              </div>
              <div  class="analysis1" v-if="item.categorySale!=null">
                <img src="../../../images/sales.png"/>
                <ul>
                  <li>最近一月销量</li>
                  <li class='font'>{{item.categorySale.categoryCount}}</li>
                  <li>
                    <span :style="{'color':item.categorySale.categorySalesRatio>0 ? '#ec3b57':'#70d99d'}">{{item.categorySale.categorySalesRatio>0 ?'+'+(item.categorySale.categorySalesRatio*100).toFixed(2):(item.categorySale.categorySalesRatio*100).toFixed(2)}}%</span>
                    <img src="../../../images/Up-icon.png" v-if="item.categorySale.categorySalesRatio>0"/>
                    <img src="../../../images/Down-icon.png" v-else />
                    <span style='color:#666666'>环比</span>
                  </li>
                </ul>
              </div>
              <div  class="analysis1" v-if="item.categorySale!=null">
                <img  src="../../../images/sales-amount.png"/>
                <ul>
                  <li>最近一个月销售额</li>
                  <li class='font'>¥{{item.categorySale.categoryAmount}}</li>
                  <li>
                    <span :style="{'color':item.categorySale.categoryAmountRatio>0 ? '#ec3b57':'#70d99d'}">{{item.categorySale.categoryAmountRatio>0?'+'+(item.categorySale.categoryAmountRatio*100).toFixed(2):(item.categorySale.categoryAmountRatio*100).toFixed(2)}}%</span>
                    <img src="../../../images/Up-icon.png" v-if="item.categorySale.categoryAmountRatio>0"/>
                    <img src="../../../images/Down-icon.png" v-else />
                    <span style='color:#666666'>环比</span>
                  </li>
                </ul>
              </div>
        </div>
        <div class='to-market'>
          <p
            @click="
            $store.commit('setId', item.market.id);
            $store.commit('setMarket', item);
            $store.commit('setMarketName', item.market.marketName);
            $store.commit('isMarket', true);"
            >
            <router-link
            class='router-a'

            :to="{path:'/full/marketMenu/targetMarketTrends/opportunityDetails',query: {id:item.market.id}}"
          >
            进入市场
          </router-link>
            </p>
        </div>

      </div>
      <div class="analysisBot clearfix">
        <div  class="analysisBot1">
             <ul
              v-for="(item,index1) in item.msList"
              v-if="index1<6"
              :key="index1"
            >
                <span>{{item.brand}}</span>
                <p>市占率:&nbsp;<span>{{(item.share*100).toFixed(2)}}%</span></p>
            </ul>
        </div>
       <div class="analysisBot2">
          <ul>
            <el-button
              @click="openGoodsVisible();getmarkData(item.market.id);getCategory(item.market.category);getMo(item.market.categoryId)"
              plain >
              +&nbsp;监控管理
            </el-button>
          </ul>
       </div>

      </div>
    </div>
  </div>
  <div class="no-cont" v-if="recommedMarketData.length==0">
    <div class="page-warp">
      <h2>推荐市场</h2>
    </div>
    <p>暂无数据</p>
  </div>
  <div class="recommend-market" v-else>
    <li>
      <p>推荐市场</p>
      <p @click='forChange(number)'>换一批</p>
    </li>
    <div class="recommend-card clearfix" >
      <ul v-for="(item,index) in recommedMarketData" :class="`b${(index)%4+1}`">
        <p>{{item.recommendType}}</p>
        <p>市场容量</p>
        <p>¥{{item.marketBase}}</p>
        <p>
          <span :style="{color:item.growthRate>=0?'#ec3b57':'#50d38a'}">{{item.growthRate>0?'+'+item.growthRate:item.growthRate}}%</span>
          <img v-if="item.growthRate>0" src="../../../images/Up-icon.png"/>
          <img v-else src="../../../images/Down-icon.png"/>
          <span style='color:#666666'>增长率</span>
        </p>
        <p class="select"
          @click="showRecommendVisible=true;recommendId=item.id;">选择</p>
      </ul>
    </div>
  </div>

   <!--查看推荐市场弹框start-->
    <div class="pop-up-showMarket1">
      <el-dialog
        title="推荐市场"
        :visible.sync="showRecommendVisible"
        width="86%"
        style="border-radius: 10px;"
        >
          <showMarket  @close="showRecommendVisible=false" style="height: 700px;overflow-y: scroll" :recommendId=recommendId  v-if="showRecommendVisible"></showMarket>
      </el-dialog>
    </div>
    <!--查看推荐市场弹框end-->
     <!--查看市场信息弹框start-->
    <div class="pop-up-showMarket">
      <el-dialog
        title="查看细分市场"
        :visible.sync="showMarketVisible"
        width="86%"
        style="border-radius: 10px;"
        >
          <showMarket style="height: 700px;overflow-y: scroll" @close="showMarketVisible=false" :singleId=singleId v-if="showMarketVisible"></showMarket>
      </el-dialog>
    </div>
    <!--查看市场信息弹框end-->
    <!--自定义市场弹框start-->
    <div class="pop-up-custom">
      <el-dialog
        title="自定义细分市场"
        :visible.sync="customMarketVisible"
        width="86%"
        style="border-radius: 10px;"
        center
        >
          <customMarket style="height: 700px;overflow-y: scroll" @close="customMarketVisible=false;getData()" :marketBases="marketBases" :parentId="parentId" :marketNames="marketNames" v-if="customMarketVisible"></customMarket>
      </el-dialog>
    </div>
    <!--自定义市场弹框end-->
    <!--弹框添加对比商品start-->
    <div class="pop-up-goods" style="width: 86%">
      <el-dialog
        title="添加对比产品"
        :visible.sync="compareGoodsVisible"
        width="86%"
        @close='close'
        style="border-radius: 10px"
        center>
        <div class="pop-cont-goods">
          <div class="col-xs-12 border">
            <div class="col-xs-4">

              <ul>
                <p>品类</p>
                <el-tree
                  :default-expand-all='true'
                  :data="category"
                  :props="defaultProps"
                  :check-on-click-node='true'
                  @current-change="checkKey"
                  lable="categoryName">
                </el-tree>
              </ul>
            </div>
            <div class="col-xs-4">
              <ul >
                <p>品类/品牌</p>
                <div class="col-xs-12 brand" v-if="hide1">
                  <!--左边-->
                  <div class="left col-xs-1">
                    <p>
                      <!--<a :href="'#div'+index" v-for="(n,index) in list">{{n.type}}</a>-->
                      <a  v-for="(n,index) in getList3(pinpai)" @click= 'click(index)' v-if="n.length !==0">{{index}}</a>
                    </p>
                  </div>
                  <!--又边-->
                  <div class="col-xs-10 right" ref="scroll">
                    <div v-for="(n,index) in getList3(pinpai)" :id="index" ref="div"  v-if="n.length !==0">
                      <!--p 和下面div 是 垂直排列-->
                      <!--此处显示-->
                      <span class="bg-bar">{{index}}</span>
                      <div>
                        <ol >
                          <span  v-for="(m,index1) in n" @click="isAlert(m.brandName,setArr)?listClick(m.brandId):alert1()">{{m.brandName}}</span>
                        </ol>
                      </div>
                    </div>
                  </div>
                </div>
              </ul>
            </div>
            <div class="col-xs-4">
              <ul>
                <p>品类/品牌/型号</p>
                <li class="col-xs-12" style="padding: 0;line-height: 40px" v-for="i in list3" v-if="hide2">
                  <span class="col-xs-9">{{i.productCode}}</span>
                  <span class="col-xs-3" style="color: #3aaaec" @click="addProduct(i.creator,i.id)">添加</span>
                </li>
              </ul>
            </div>
        </div>
          <div class="col-xs-12 table-grid">
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                prop="category"
                label="品类">
              </el-table-column>
              <el-table-column
                prop="brand"
                label="品牌"
                width="180">
              </el-table-column>
              <el-table-column
                prop="productCode"
                label="型号">
              </el-table-column>
              <el-table-column
                label="操作">
                <template slot-scope="scope">
                  <el-button  type="text" size="small" @click="deleteProduct(scope.row)">取消</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
           <el-button type="primary" @click="cancel()" style="width: 100px;height: 40px;margin: 50px 0 20px 0">确 定</el-button>
           <el-button @click="cancel()"  style="width: 100px;height: 40px;margin: 50px 0 20px 0">取 消</el-button>
        </span>
      </el-dialog>
    </div>
    <!--弹框添加对比商品end-->
  </div>
</div>
</template>
<script>
import customMarket from "../trendsIndex/customMarket";
import showMarket from "../trendsIndex/showMarket";
export default {
  components: {
    customMarket,
    showMarket
  },
  data() {
    return {
      parentId: null,
      marketNames: "",
      marketBases: "",
      datas: [],
      recommedMarketData: [], //推荐市场数组
      category: [], //获取品类data
      cateValue: "", //选择品类下拉框值
      cateOption: [],
      allCateValue: "",
      cateId: "",
      brId: "",
      hide1: false,
      hide2: false,
      list2: [],
      list3: [],
      pinpai: [],
      erMarkId: "",
      allOption: [
        {
          label: "全部",
          value: "全部"
        },
        {
          label: "自定义",
          value: "自定义"
        },
        {
          label: "推荐",
          value: "推荐"
        }
      ],
      conValue: "",
      cascadeValue: "",
      cascadeOption: [
        {
          label: "电视",
          value: 1
        },
        {
          label: "洗衣机",
          value: 2
        }
      ],
      page: 1,
      totalPage: 1,
      compareGoodsVisible: false,
      customMarketVisible: false,
      showMarketVisible: false,
      showRecommendVisible:false,
      defaultProps: {
        children: "children",
        label: "categoryName"
      },
      tableData: [],
      categoryArr: [],
      setArr: "",
      number: 1,
      pages: "",
      highLight: true
    };
  },
  mounted() {
    this.$store.commit("isMarket", false);
    this.getType();
    this.getData();
    // this.getCategory();
    //获取推荐市场
    let param = {
      pageNo: 1,
      pageSize: 8
    };
    this.getRecommendMarket(param);

    // this.getmarkData()
  },
  methods: {
    close(){
      this.tableData = [];
      this.compareGoodsVisible = false;
      this.list3=[]
       this.getData()
    },
    openGoodsVisible(){
     this.compareGoodsVisible= true;

    },
    getMo(id){
       this.hide1 = true;
      this.cateId=id
      this.getPinPai();
    },
    isAlert(value, arr) {
      console.log(value, arr.length, arr);
      if (arr.length === 0) {
        return true;
      } else {
        for (let i in arr) {
          console.log(arr[i]);
          if (arr[i] === value || arr.length < 5) {
            return true;
          }
        }
      }
    },
    //关闭弹框清空table数据
    cancel() {
      this.tableData = [];
      this.compareGoodsVisible = false;
      this.list3=[]
       this.getData()
    },
    //
    alert1() {
      this.$message({
        message: "可选品牌数不能超过5个",
        type: "warning"
      });
    },
    //换一换
    forChange(i) {
      console.log(34567890);
      let allPage = (this.number = i + 1);
      console.log(i, allPage, this.pages);
      if (allPage > this.pages) {
        this.number = 1;
        let param = {
          pageNo: 1,
          pageSize: 8
        };
        this.getRecommendMarket(param);
      } else {
        let param = {
          pageNo: allPage,
          pageSize: 8
        };
        this.getRecommendMarket(param);
      }
    },
    //点击品类
    checkKey(val) {
      console.log(val)
     // this.cateId = val.id;
      console.log(134)
      console.log(val);
     // this.getPinPai()
      if (val.children == undefined) {
        this.hide1 = true;
      } else {
       // this.hide1 = false;
      }
      this.hide2 = false;
      if (val.categoryName == this.categoryValue) {
        this.getPinPai();
        this.highLight = true;
      }
    },

    //点击品牌获取该品牌型号
    listClick(n) {
      console.log(n);
      this.hide2 = true;
      this.getProductModle(n);
    },
    click(index) {
      console.log(index);
      let divs = this.$refs.div;
      let scroll = this.$refs.scroll;
      divs.map((item, i) => {
        if (index === item.id) {
          scroll.scrollTop = item.offsetTop;
        }
      });
    },
    change(e) {
      this.page = e;
      this.getData();
    },
    // 商品品类获取
    getType() {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getSubCategory",
          query: {
            type: 0
          }
        })
        .then(res => {
          console.log(res.data.data);
          let list = res.data.data;
          list.unshift({
            id: 0,
            categoryName: "全部"
          });
          this.cateOption = list;
        })
        .catch(error => {});
    },
    // 市场机会
    getData() {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getMarketTrends",
          query: {
            categoryId: this.cateValue == 0 ? "" : this.cateValue,
            marketType: this.allCateValue == "全部" ? "" : this.allCateValue,
            marketName: this.conValue,
            pageNo: this.page,
            pageSize: 10,
            creator:this.$store.state.user.id,
          }
        })
        .then(res => {
          let marketData = res.data.data.list;
          //这里只获取了10条的信息。
          this.$store.commit("setMarketData", marketData);
          console.log(2);
          this.datas = marketData;

          this.totalPage = res.data.data.total;
        })
        .catch(error => {});
    },
    //添加对比商品，品类接口
    getCategory(value) {
      this.categoryValue = value;
      this.$http
        .post(this.GLOBAL.host, {
          method: "getCategory",
          query: {}
        })
        .then(res => {
          this.categoryData = res.data.data;
          let { subCategory, category } = this.categoryData;
          for (let i in category) {
            let subCategoryArr = subCategory[`id_${category[i].id}`];
            category[i].children = subCategoryArr;
          }
          console.log(this.category);
          // let categoryArr1 = this.categoryData.category;
          // for (let a in categoryArr1) {
          //   console.log(categoryArr1[a]);
          //   for (let b in categoryArr1[a].children) {
          //     if (categoryArr1[a].children[b].categoryName != value) {
          //       categoryArr1[a].children[b].disabled = true;
          //     }
          //   }
          // }
          this.category = this.categoryData.category;
        })
        .catch(error => {});
    },
    //品类品牌关系接口-通过品类查品牌
    getPinPai() {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getCBRelation",
          query: {
            categoryId: this.cateId
          }
        })
        .then(res => {
          console.log(res.data.data);
          // if(res.data.data.length==0){
          //   this.$message({
          //     message: '没有此品类相关品牌',
          //     type: 'warning'
          //   });
          // }
          this.pinpai = res.data.data;
          console.log(this.pinpai);
        })
        .catch(error => {});
    },
    //
    getList3(data) {
      let en = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      let obj = {};
      //obj={A:[],B:[]}
      for (let i in en) {
        obj[en[i]] = [];
      }
      for (let i = 0; i < data.length; i++) {
        let type = data[i].firstLetter;
        console.log(data[i]);
        obj[type].push(data[i]);
        console.log(obj[type].length);
      }
      console.log(obj);
      return obj;
    },
    //获取产品型号-单个品牌-竞品关联接口-根据品类/品牌查型号
    getProductModle(n) {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getProduct",
          query: {
            categoryId: this.cateId,
            brandId: n
          }
        })
        .then(res => {
          console.log(res.data.data.length);
          if (res.data.data.length == 0) {
            this.$message({
              message: "没有此品牌相关型号",
              type: "warning"
            });
          }
          this.list3 = res.data.data;
          console.log(this.list3);
        })
        .catch(error => {});
    },
    //添加市场关联竞品接口-添加市场
    addProduct(creator, id) {
      console.log(creator, id);
      this.$http
        .post(this.GLOBAL.host, {
          method: "addMarketProduct",
          data: {
            creator: creator,
            marketId: this.erMarkId,
            productId: id
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              message: "添加市场成功",
              type: "success"
            });
            let a = this.erMarkId; //市场id
            this.getmarkData(a);
          } else if (res.data.code === 300) {
            this.$message({
              message: "已有该品类品牌型号，不能再添加",
              type: "warning"
            });
          }else {
            this.$message({
              message: '添加失败',
              type: 'error'
            });
          }
        })
        .catch(error => {});
    },
    //table表数据-查询市场关联竞品接口
    getmarkData(id) {
      console.log(id);
      this.erMarkId = id;
      this.$http
        .post(this.GLOBAL.host, {
          method: "getMarketProduct",
          query: {
            marketId: id
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            let arr = [];
            for (let i in res.data.data) {
              arr.push(res.data.data[i].brand);
            }
            let set = Array.from(new Set(arr));
            this.setArr = set;
            console.log(this.setArr);
          }
        })
        .catch(error => {});
    },
    //删除table删除市场关联竞品接口
    deleteProduct(e) {
      console.log(e);
      this.$http
        .post(this.GLOBAL.host, {
          method: "delMarketProduct",
          data: { id: e.id }
        })
        .then(res => {
          if (res.data.code === 200) {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            let a = this.erMarkId; //市场id
            this.getmarkData(a);
          }else {
            this.$message({
              message: '删除失败',
              type: 'error'
            });
          }
        })
        .catch(error => {});
    },
    //获取推荐市场
    getRecommendMarket(param) {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getRecommendMarket",
          query: param
        })

        .then(res => {
          console.log(res.data.code);
          if (res.data.code == 200) {
            this.recommedMarketData = res.data.data.list;
            this.pages = res.data.data.pages;
          }
        })
        .catch(error => {});
    },
    //删除目标市场
    delete1(id) {
      this.$confirm("是否要继续删除市场？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.marketDelete(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    marketDelete(id) {
      this.$http
        .post(this.GLOBAL.host, {
          method: "delMarket",
          data: {
            id: id
          }
        })
        .then(res => {
          console.log(res.data.code);
          if (res.data.code == 200) {
            this.$message({
              message: "目标市场删除成功",
              type: "success"
            });
            //刷新目标市场列表
            this.page = 1;
            this.getData();
          }else {
            this.$message({
              message: '删除失败',
              type: 'error'
            });
          }
        })
        .catch(error => {});
    }
  },
  watch: {
    categoryArr(value, oldValue) {
      console.log(value, oldValue);

    }
  }
};
</script>
<style lang="less" >
@import "../../../assets/yyh";
.trend {
  width: 100%;
  height: 100%;
  background: #f4f4f4;
  h2 {
    font-size: 100%;
    font-weight: normal;
    margin: 0;
  }

  .select {
    float: right;
    margin-right: 20px;
    border: 1px solid #b1b1b1;
    color: #b1b1b1;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    width: 28%;
    border-radius: 5px;
    cursor: pointer;
  }
  > .trendBar {
    background: #f4f4f4;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    .btn {
      padding: 0;
      margin-left: 62px;
      width: 176px;
      font-size: 14px;
      width: 10.59%;
      line-height: 40px;
      height: 40px;
      border-radius: 5px;
      text-align: center;
      line-height: 40px;
      background: #acc6d3;
      color: #ffffff;
      position: absolute;
      right: 20px;
    }
    > .input-with-select {
      width: 300px;
      height: 40px;
      margin-right: 30px;
      border-radius: 8px;
      > .el-input__inner {
        width: 300px;
      }
      > .el-input-group__append {
        width: 180px;
        text-align: center;
        font-size: 15px;
        color: #ffffff;
        background: #3aaaec;
        > .el-button el-button--default {
          > span {
          }
        }
      }
    }
    > .el-select {
      width: 160px;
      height: 40px;
      border-radius: 8px;
      .el-input--suffix {
        width: 160px;
        height: 40px !important;
        .el-input__inner {
          width: 160px !important;
          height: 40px;
        }
        > .el-input-group__append {
          padding: 0;
          width: 180px;
          height: 40px;
        }
      }
    }
    > .el-select:nth-child(1) {
      margin-left: 20px;
      margin-right: 10px;
    }
    > .el-select:nth-child(2) {
      margin: 0 10px 0 0;
    }
  }
  .trend-con:nth-child(1) {
    margin-top: 100px;
  }
  .trend-con {
    width: 97.64%;
    height: 310px;
    margin: auto;
    background: #f6f6f6;
    border: 1px solid #eee;
    margin-bottom: 20px;
    box-shadow: 10px 10px 10px rgba(238, 238, 238, 0.5);
    > .trend-con-head {
      height: 60px;
      width: 100%;
      background: #fff;
      font-size: 18px;
      border-bottom: 1px solid #eaeaea;
      span {
        color: #525252;
      }
      > li:nth-child(1) {
        float: left;
        line-height: 60px;
        padding-left: 20px;
        color: #999999;
      }
      > li:nth-child(2) {
        float: left;
        line-height: 60px;
        padding-left: 78px;
        color: #979797;
      }
      > li:nth-child(3) {
        float: right;
        line-height: 60px;
        padding-right: 20px;
        > span {
          float: left;
          color: #37a4e5;
          margin-left: 33px;
          > img:nth-child(1),
          > img:nth-child(2) {
            width: 26px;
            height: 26px;
          }
        }
      }
    }
    > .analysis {
      width: 100%;
      height: 170px;
      background: #fff;
      border-bottom: 1px solid #ececec;
      > div {
        width: 33.33%;
        height: 170px;

        display: flex;
        //justify-content: center;
        align-items: center;
        > img {
          width: 90px;
          height: 90px;
          margin-right: 20px;
          float: left;
        }
        > ul {
          float: left;
          > li:nth-child(1) {
            font-size: 18px;
            color: #686868;
            line-height: 30px;
          }
          > li:nth-child(2) {
            font-size: 26px;
            color: #313131;
            line-height: 42px;
          }
        }
        ul {
          > li {
            > img {
              width: 24px;
              height: 12px;
            }
          }
        }
      }
      .analysis-wrap {
        width: 90%;
        float: left;
        display: flex;
      }
      .to-market {
        width: 10%;
        float: left;
        display: flex;
        justify-content: center;
        p {
          // padding: 5px 10px;
          color: #fff;
          border-radius: 5px;
          font-size: 14px;

          background: linear-gradient(to right, #3bc9e2, #08acf2);
          .router-a {
            text-decoration: none;
            display: inline-block;
            width: 80px;
            line-height: 40px;
            text-align: center;
            color: #ffffff;
          }
        }
      }
      .analysis1 {
        width: 30%;
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;
        .font{
          font-size:24px;
        }
      }
    }
    > .analysisBot {
      width: 100%;
      height: 80px;
      background: #fff;
      position: relative;
      display: flex;
      > .analysisBot1 {
        width: 90%;
        > ul {
          width: 18%;
          height: 100%;
          float: left;
          display: flex;
          align-items: center;
          justify-content: center;
          padding-left: 20px;
          > p {
            margin: 0;
          }
          > span {
            padding-right: 20px;
          }
        }
      }
      > .analysisBot2 {
        width: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
        > ul {
          width: 80%;
          > .el-button {
            width: 100%;
            display: flex;
            justify-content: center;
          }
        }
      }
    }
  }
  .no-cont{
    p{
      width: 97.64%;
      height: 200px;
      line-height: 200px;
      margin: auto;
      background: #ffffff;
      text-align: center;
    }

  }
  /*分页样式start*/
  .page-warp {
    position: relative;
    height: 40px;
    width: 97.64%;
    margin: auto;
    background: #eeeeee;
    > h2 {
      position: absolute;
      left: 20px;
      line-height: 40px;
    }
    > .paging {
      position: absolute;
      float: right;
      right: 20px;
      color: #676767;
      display: flex;
      margin-top: 5px;
      .first-page {
        position: absolute;
        width: 53px;
        height: 32px;
        background: #fff;
        border: 1px solid #ebebeb;
        font-size: 14px;
        text-align: center;
        line-height: 32px;
      }
      .el-pagination {
        padding: 0 0 0 53px;
        height: 32px;
        line-height: 32px;
        border-top: 1px solid #ebebeb;
        border-bottom: 1px solid #ebebeb;
      }
      .el-pager {
        background: #fff;
        height: 28px;
        li {
          padding: 0;
          border-right: 1px solid #ebebeb;
          background: #fff;
          margin: 0;
        }
      }
      .btn-prev {
        border-right: 1px solid #ebebeb;
        color: #676767;
        background: #fff;
        margin: 0;
        padding: 0 5px;
      }
      .btn-next {
        border-right: 1px solid #ebebeb;
        color: #676767;
        background: #fff;
        margin: 0;
        padding: 0 5px;
      }
    }
  }

  /*分页样式end*/
  /*对比产品弹框样式start*/
  .pop-cont-goods {
    .border {
      margin-top: 30px;
      div {
        > ul {
          border: 1px solid #cccccc;
          height: 390px;
          border-radius: 10px;
          overflow: scroll;
          position: relative;
          padding-top: 40px;
          > p {
            height: 40px;
            background: #e3f4fe;
            border-top-right-radius: 10px;
            border-top-left-radius: 10px;
            color: #39abe9;
            padding-left: 20px;
            line-height: 40px;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 2;
          }
        }
      }
    }
    .table-grid {
      margin-top: 40px;
      .cell {
        text-align: center;
      }
    }
    .brand {
      padding: 0;
      position: relative;
      height: 100%;
      a {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 2px;
        text-align: center;
        line-height: 20px;
        background: #f4f9ff;
        border: 1px solid #d1dee4;
        color: #4aade8;
        font-size: 14px;
      }
      .left {
        position: relative;
        top: 0;
        bottom: 0;
      }
      .right {
        height: 100%;
        overflow: scroll;
        > div {
          display: flex;
          flex-direction: column;
          ol {
            display: flex;
            flex-direction: column;
          }
        }
      }
      > div {
        > ol {
          > span {
            display: block;
          }
        }
      }
      .bg-bar {
        display: inline-block;
        background: #eff6fc;
        color: #95999a;
      }
    }
  }
  .el-dialog {
    border-radius: 10px;
  }
  /*对比产品弹框样式end*/
  .recommend-market {
    width: 97.65%;
    margin: auto;
    height: auto;
    background: #fff;
    margin-top: 20px;
    > li {
      width: 100%;
      height: 40px;
      background: #eaeaea;
      line-height: 40px;
      > p:nth-child(1) {
        float: left;
        margin-left: 0.9%;
      }
      > p:nth-child(2) {
        float: right;
        color: #3aaaec;
        margin-right: 0.9%;
        cursor: pointer;
      }
    }
    > .recommend-card {
      width: 100%;
      padding-top: 20px;
      > ul {
        width: 23.37%;
        height: 200px;
        float: left;
        margin-left: 1.265%;
        margin-bottom: 20px;
        border-bottom: 1px solid #e0e0e0;
        border-right: 1px solid #e0e0e0;
        > p:nth-child(1) {
          height: 50px;
          line-height: 40px;
          padding-left: 20px;
          font-size: 16px;
          color: #fff;
          margin: 0;
        }
        > p:nth-child(2) {
          height: 40px;
          line-height: 40px;
          padding-left: 20px;
          font-size: 16px;
          color: #666666;
          margin: 0;
        }
        > p:nth-child(3) {
          height: 22px;
          line-height: 22px;
          padding-left: 20px;
          font-size: 22px;
          color: #343434;
          margin: 0;
        }
        > p:nth-child(4) {
          height: 40px;
          line-height: 40px;
          padding-left: 20px;
          font-size: 16px;
          color: #ec3e59;
          margin: 0;
        }
        &.b1 {
          border-radius: 5px 5px 0 0;
          background-image: url("../../../images/market-one.png");
          background-size: 100% 100%;
        }
        &.b2 {
          border-radius: 5px 5px 0 0;
          background-image: url("../../../images/market-two.png");
          background-size: 100% 100%;
        }
        &.b3 {
          border-radius: 5px 5px 0 0;
          background-image: url("../../../images/market-three.png");
          background-size: 100% 100%;
        }
        &.b4 {
          border-radius: 5px 5px 0 0;
          background-image: url("../../../images/market-four.png");
          background-size: 100% 100%;
        }
      }
    }
  }
  .pop-up-custom {
    .el-dialog--center {
      width: 86% !important;
    }
  }
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
/*::-webkit-scrollbar*/
/*{*/
/*width: 1px;*/
/*height: 1px;*/
/*background-color: #F5F5F5;*/
/*}*/
</style>
